<template>
  <div class="app">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="person.age++">修改年龄</button>
    <hr />
    <h2>{{ car2 }}</h2>
    <button @click="car2.price += 10">车的价格加10</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { markRaw, reactive, toRaw } from "vue";
import mockjs from "mockjs";

// toRaw 用于获取一个响应式对象的原始对象
const person = reactive({
  name: "Tony",
  age: 18,
});
// 用于获取一个响应式对象的原始对象
let person2 = toRaw(person);
console.log("响应式数据", person); // Proxy(Object) {name: 'Tony', age: 18}
console.log("原始数据", person2); // {name: 'Tony', age: 18}

// markRaw:标记一个普通对象，使其永远不会变成响应式对象
let car = markRaw({
  brand: "奔驰",
  price: 100,
});
let car2 = reactive(car);
console.log("car:", car); // {brand: '奔驰', price: 100}
console.log("car2:", car2); // {brand: '奔驰', price: 100}

console.log(mockjs);
let mockJS = markRaw(mockjs);
</script>

<style scoped>
.app {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10;
  padding: 10px;
}
button {
  margin: 5px;
}
</style>
